<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>注册 - 分享文档</title>
    <div th:replace="common/head">head</div>
    <style type="text/css">
    .header {top: 0; box-shadow: 0 1px 12px rgba(16, 6, 25, 0.2); z-index: 999;}
    .main {width: 450px; min-height: 342px; margin: 4rem auto 4.2rem; padding: 1rem 3.25rem 1.2rem; background: #ffffff;}
    .main .layui-form-pane .layui-form-label {line-height: 32px;}
    .main .layui-input,.layui-btn-big {height: 50px; line-height: 50px;}
    .main .layui-btn {background-color: #1BAAE6;}
    .footer {background-color: #ffffff;}
    </style>
</head>

<body>
<div th:replace="common/nav::nav(pageName='')">nav</div>
<section style="background: #e5e8ec;overflow: hidden;padding-top: 65px;">
    <div class="main layui-clear">
        <h2 class="page-title">注册</h2> 
        <div class="layui-form layui-form-pane">
            <form method="post">
                <div class="layui-form-item">
                    <label for="L_email" class="layui-form-label">邮箱</label>
                    <div class="layui-input-block">
                        <input type="text" id="L_email" name="email" placeholder="电子邮箱" required lay-verify="email" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_nickName" class="layui-form-label">昵称</label>
                    <div class="layui-input-block">
                        <input type="text" id="L_nickName" name="nickName" placeholder="昵称" required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_pass" class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input type="password" id="L_pass" name="password" placeholder="密码" required lay-verify="pass" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_repass" class="layui-form-label">确认密码</label>
                    <div class="layui-input-block">
                        <input type="password" id="L_repass" name="repass" placeholder="确认密码" required lay-verify="repass" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div  class="layui-form-item">
                    <button class="layui-btn layui-btn-big" style="width: 100%" lay-filter="*" lay-submit>立即注册</button>
                </div>
            </form>
        </div>
    </div>
</section>

<div th:replace="common/footer">footer</div>
</body>
<script th:inline="javascript">
    /*<![CDATA[*/
    var BASE_URL = /*[[@{/}]]*/;
    /*]]>*/
</script>
<script th:src="@{/static/layui/layui.js}"></script>
<script th:inline="javascript">

layui.use(['layer', 'element', 'form'], function(){
    var $ = layui.jquery
    ,layer = layui.layer
    ,element = layui.element()
    ,form = layui.form();
    
    var gather = {
    
	    //Ajax
		json: function(url, data, success, options){
			var that = this;
	      	options = options || {};
	      	data = data || {};
	      	return $.ajax({
	        	type: options.type || 'post',
	        	dataType: options.dataType || 'json',
	        	data: data,
	        	url: url,
	        	success: function(res){
	          		if(res.status === 0) {
	            		success && success(res);
	          		} else {
	            		layer.msg(res.msg||res.code, {shift: 6});
	          		}
	        	}, error: function(e){
	          		options.error || layer.msg('请求异常，请重试', {shift: 6});
	        	}
	      	});
	    }
	    ,form: {}
    }
    
    //表单提交
	form.on('submit(*)', function(data){
		var action = $(data.form).attr('action'), button = $(data.elem);
		gather.json(action, data.field, function(res){
			var end = function(){
	        	if(res.action){
	          		location.href = res.action;
	        	} else {
	          		gather.form[action||button.attr('key')](data.field, data.form);
	        	}
	      	};
	      	if(res.status == 0){
	        	button.attr('alert') ? layer.alert(res.msg, {
	          		icon: 1,
	          		time: 10*1000,
	          		end: end
	        	}) : end();
	      	};
    	});
	    return false;
	});
    
    form.verify({
        pass: [
            /^[\S]{6,12}$/
            ,'密码必须6到12位，且不能出现空格'
        ]
        ,repass: function(value){
            if(!/^[\S]{6,12}$/.test(value)){
                return '确认密码必须6到12位，且不能出现空格';
            }
            if(value != $('#L_pass').val()){
                return '两次输入的密码不一致';
            }
        }
    });
});
</script>
</html>